<template>
  <div>
        <div class="defray" >
            <!-- 头部 -->
            <div class="defray-top">
                <template v-for="(val1,i1) in arr1">
                    <div :key="'aa1'+i1"  @click="deChange(i1)">
                        <span :class="i1==activeIndex?'deA1':''">
                        {{val1}}
                        </span>
                    </div>
                </template>
            </div>
        </div>
  </div>
</template>

<script>
export default {
    name:'WaitDefray',
    data(){
        return {
            bol:false,
            arr1:this.$store.state.order[0].tit,
            activeIndex: '',
        }
    },
    methods:{
        deChange(s){
            if(s ==0){
                this.$router.replace('/order');
                this.activeIndex=0;
            }if(s ==1){
                this.$router.replace('/waitDefray');
                this.activeIndex=1;
            }if(s ==2){
                this.$router.replace('/waitOrder');
                this.activeIndex=2;
            }if(s ==3){
                this.$router.replace('/waitReceive');
                this.activeIndex=3;
            }if(s ==4){
                this.$router.replace('/tradeFinish');
                this.activeIndex=4;

            }
            

        }

    }

}
</script>

<style scoped>
.defray{
    width: 100%;
    overflow: scroll;
}
.defray-top{
    width: 110%;
    height: 8rem;
    line-height: 8rem;
    background-color: #fff;
    font-size: 3rem;
    color: #4c4c4c;
    display:  flex;
    border-bottom: 0.1rem solid #ccc;
}
.defray-top div{
    flex: 1;
}
.deA1{
    display: inline-block;
    line-height: 7.9rem;
    color: #e53e42;
    border-bottom: #e53e42 0.2rem solid;
}
</style>